<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内网穿透</title>
    <link rel="stylesheet" href="./css/linkList.css">
    <link rel="stylesheet" href="./css/nav.css">
    <script src="./js/vue.global.js"></script>
    <link rel="stylesheet" href="./element-plus/index.css" />
    <script src="./element-plus/index.full.js"></script>
    <script src="./js/echarts.js"></script>
</head>

<body>

    <div id="app">
        <div class="box">
            <div id="echarts"></div>
            <div class="btns">
                <el-button type="success" link @click="dialogFormVisible = true">添加规则</el-button>
                <el-button type="info" link @click="retryAll">全部重试</el-button>
            </div>
            <div class="list">
                <div class="title">
                    <div>前缀</div>
                    <div>地址</div>
                    <div>类型</div>
                    <div>总转数据</div>
                    <div>操作</div>
                </div>
                <div class="list-box">
                    <div v-for="(item, index) in routerList" :class="{active : server.routers[item.path]}">
                        <div> {{ item.path }} </div>
                        <div>{{ item.host }}:{{ item.port }}</div>
                        <div>{{ item.type }}</div>
                        <div>
                            {{ item.flowSize > 1048576 ?
                            ((item.flowSize / 1048576).toFixed(2) + 'MB') :
                            ((item.flowSize / 1024).toFixed(2) + 'KB') }}</div>
                        <div>
                            <el-button link type="primary" v-if="server.routers[item.path]">详情</el-button>
                            <el-button link type="info" @click="addRouter(item)"
                                v-if="!server.routers[item.path]">重试</el-button>
                            <el-button link type="danger" @click="delRouter(item)">删除</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <el-dialog v-model="dialogFormVisible" title="添加规则" width="500">
            <el-form :model="form">
                <el-form-item label="启用http协议">
                    <el-switch v-model="form.type" active-value="http" inactive-value="file"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
                </el-form-item>
                <el-form-item label="主机IP" v-if="form.type == 'http'">
                    <el-input v-model="form.host" autocomplete="off" placeholder="127.0.0.1" />
                </el-form-item>
                <el-form-item label="端口号" v-if="form.type == 'http'">
                    <el-input v-model="form.port" autocomplete="off" placeholder="8080" />
                </el-form-item>
                <el-form-item label="文件夹" v-else>
                    <!-- webkitdirectory代表选择文件夹 -->
                    <input type="file" id="file" hidden @change="fileChange" webkitdirectory>
                    <el-input placeholder="文件夹目录" v-model="form.filePath">
                    </el-input>
                    <!-- <el-button style="margin-top: 10px;" @click="btnChange">选择</el-button> -->
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="addRouter(form)">
                        提交
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>


    <script>

        const ipcRenderer = require('electron').ipcRenderer;


        const app = Vue.createApp({
            data() {
                return {
                    routerList: [],
                    dialogFormVisible: false,
                    form: {
                        type: 'http'
                    },
                    server: {
                        routers: {}
                    }
                }
            },
            watch: {
                routerList: {
                    deep: true,
                    handler(newValue, oldValue) {
                        localStorage.setItem('link:routerList', JSON.stringify(newValue))
                    },
                }
            },
            mounted() {
                let routerList = localStorage.getItem('link:routerList')

                if (routerList) {
                    try {
                        this.routerList.push(...JSON.parse(routerList))
                    } catch (e) { }
                }

                ipcRenderer.on('addRouterCount', (e, path, count) => {
                    for (let index = 0; index < this.routerList.length; index++) {
                        const element = this.routerList[index];
                        if (element.path == path) {
                            element.flowSize += count
                        }
                    }
                })

                this.$message.success('链接成功')
                ipcRenderer.send('socketInfo')
                ipcRenderer.on('socketInfo', (e, res) => {
                    this.server = res
                })

                ipcRenderer.on('addRouter', (e, res) => {
                    this.dialogFormVisible = false
                    if (res.success) {

                        for (let index = 0; index < this.routerList.length; index++) {
                            const element = this.routerList[index];
                            if (element.path == res.data.path) {
                                return
                            }
                        }

                        this.routerList.push(res.data)

                        this.$message.success('添加成功')
                    }
                })

                ipcRenderer.on('delRouter', (e, res) => {
                    if (res.success) {
                        for (let index = 0; index < this.routerList.length; index++) {
                            const element = this.routerList[index];
                            if (element.path == res.data) {
                                this.routerList.splice(index, 1)
                                return
                            }
                        }
                    }
                })
            },
            methods: {
                addRouter(e) {
                    ipcRenderer.send('addRouter', {
                        ...e
                    })
                },
                retryAll() {
                    for (let index = 0; index < this.routerList.length; index++) {
                        const element = this.routerList[index];
                        if (!this.server.routers[element.path]) {
                            this.addRouter(element)
                        }
                    }
                    this.$message.success('重试成功')
                },
                delRouter(item) {
                    ipcRenderer.send('delRouter', {
                        path: item.path,
                        type: 'del'
                    })
                },

                fileChange(e) {
                    try {
                        const fu = document.getElementById('file')
                        if (fu == null) return

                        // console.log("文件夹路径", fu.files[0].webkitRelativePath, fu.files[0].path)
                        var webkitRelativePath = fu.files[0].webkitRelativePath
                        var path = fu.files[0].path
                        var zhenshi = path.substring(0, path.indexOf(webkitRelativePath.split("/")[webkitRelativePath.split("/").length - 1]) - 1)
                        // console.log("真实路径", zhenshi.replace(/\\/g, '/'))
                        this.form.filePath = zhenshi.replace(/\\/g, '/')
                    } catch (error) {
                        console.debug('choice file err:', error)
                    }
                },
                btnChange() {
                    var file = document.getElementById('file')
                    file.click()
                },
            }
        })

        app.use(ElementPlus)

        app.mount('#app')


    </script>


    <script src="./js/linkList.echarts.js"></script>

</body>

</html>